<template>
	<div class="leave">
		<div class="head">
			<h2>申请</h2>
			<h2 @click="goBack" style="cursor: pointer">返回</h2>
		</div>
		
		<div class="applforForm">
			<el-form ref="myForm" :model="formData" class="form" :rules="rules">
				<el-form-item label="申 请 人:" prop="userId">
					<el-input disabled v-model="formData.username" placeholder="请输入申请人名称"></el-input>
				</el-form-item>
				<el-form-item label="请 假 原 因:" prop="content">
					<el-input v-model="formData.content" placeholder="说明原因"></el-input>
				</el-form-item>
				<el-form-item label="请 假 类:" prop="typeId">
					<el-select v-model="formData.typeId" clearable placeholder="请选择请假类">
						  <el-option
							v-for="item in options1"
							:key="item.value"
							:label="item.typeName"
							:value="item.typeId">
						  </el-option>
					</el-select>
				</el-form-item>
			  
				<el-form-item label="审 批 人:" prop="adminId">
					<el-select v-model="formData.adminId" clearable placeholder="请选择审批人">
						  <el-option
							v-for="item in options2"
							:key="item.value"
							:label="item.userName"
							:value="item.userId">
						  </el-option>
					</el-select>
				</el-form-item>
			  
				<el-form-item label="请 假 起 始 时 间:" prop="startTime">
					<el-date-picker
					  v-model="formData.startTime"
					  type="date"
					  placeholder="请选择起始时间">
					</el-date-picker>
				</el-form-item>
				
				<el-form-item label="请 假 截 止 时 间:" prop="endTime">
					<el-date-picker
					  v-model="formData.endTime"
					  type="date"
					  placeholder="请选择截止时间">
					</el-date-picker>
				</el-form-item>
			</el-form>
			
			<div class="btns">
				<el-button @click="confirm('myForm')">确定</el-button>
				<el-button @click="cancellation()">取消</el-button>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
	    data() {
	      return {
			baseUrl:require("../js/baseUrl.js").baseUrl,
			pageIndex:1,//第几页
			pageSize:5,//每页显示几条
			formData:{
				username:'',
				userId:'',
				num:'',
				adminId:'',
				content: '',
				typeId: '',
				startTime:'',
				endTime:'',
			},
			options1:[],
			options2:[],
			totol:0,
			rules:{
				content: [
				    { required: true, message: '请假原因不能为空', trigger: 'blur' }
				],
				typeId: [
				    { required: true, message: '请假类不能为空', trigger: 'blur' }
				],
				adminId: [
				    { required: true, message: '审批人不能为空', trigger: 'blur' }
				],
				startTime: [
				    { required: true, message: '起始时间不能为空', trigger: 'blur' }
				],
				endTime: [
				    { required: true, message: '截止时间不能为空', trigger: 'blur' }
				],
			}
	      }
	    },
		methods:{
			goBack(){//返回上一级
				this.$router.go(-1)
			},
			//取消
			cancellation(){
				this.formData.content=""
				this.formData.typeId=""
				this.formData.adminId=""
				this.formData.startTime=""
				this.formData.endTime=""
			},
			//请假天数
			getDiffDay(){
				let myStartTime = Date.parse(this.formData.startTime)
				let myEndTime = Date.parse(this.formData.endTime)
				//console.log(myStartTime,myEndTime)
				let diffDate=Math.abs(myStartTime - myEndTime)
				if(myStartTime===myEndTime){
					this.formData.num=1
				}else{
					let diffDate = Math.abs(myStartTime - myEndTime)
					this.formData.num = Math.ceil(diffDate / (1000 * 3600 * 24))//向上取整
				}
			},
			//请假类
			getleavecategory(){
				//接口	SchoolSys/loaType/findAll
				this.$http.post(this.baseUrl+"SchoolSys/loaType/findAll",{
					
				}).then(res=>{
					//console.log(res)
					this.options1=res.data.data
				})
			},
			// //审批人
			getapprovedby() {
				this.formData.userId=sessionStorage.getItem("userId")
				//接口	SchoolSys/user/findPasser
				this.$http.post(this.baseUrl + "SchoolSys/user/findPasser", {
					userId:this.formData.userId,
				}).then(res => {
					// console.log(res)
					if(res.data.code==200){
						this.options2 = res.data.data
					}
				})
			},
			//确定
			confirm(form){
				this.$refs[form].validate((valid) => {
					if(valid){
						const Y =this.formData.startTime.getFullYear();//年
						const M =this.formData.startTime.getMonth()+1;//月
						const D =this.formData.startTime.getDate()//日
						var timeStr1= Y+"-"+M+'-'+D;
						
						const Y2 =this.formData.endTime.getFullYear();//年
						const M2 =this.formData.endTime.getMonth()+1;//月
						const D2 =this.formData.endTime.getDate();//日
						var timeStr2= Y2+"-"+M2+'-'+D2
						
						this.getDiffDay()//请假天数
						//接口	SchoolSys/uloa/add
						this.$http.post(this.baseUrl+"SchoolSys/uloa/add",{
							userId:this.formData.userId,
							num:this.formData.num,
							content:this.formData.content+"",
							adminId:this.formData.adminId,
							startTime:timeStr1,
							endTime:timeStr2,
							typeId:this.formData.typeId,
						}).then(res=>{
							//console.log(res)
							if(res.data.code==200){
								this.$message.success("申请成功")
								this.$router.push("/leavemanager")
							}else{
								this.$message.error(res.data.msg)
							}
						})
					}
				})
			}
		},
		mounted(){
			//获取请假类
			this.getleavecategory()
			//获取审批人
			this.getapprovedby()
			
			this.formData.username=sessionStorage.getItem("userName")
			
		
		}
	}	
</script>

<style>
	.head{
		margin: 40px 20px 0 40px;
		display: flex;
		justify-content: space-between;
	}
	.head h2{
		font-size: 28px;
		color: #333;
	}
	.btn2{
		width: 98px;
		height: 50px;
		color: #fff;
		font-size: 20px;
		border-radius: 4px;
	}
	
	.applforForm{
		margin-top: 3%;
	}
	.applforForm .form{
		display: flex;
		flex-wrap:wrap;
	}
	.applforForm .el-form-item{
		width: 50%;
		margin-bottom: 25px;
		display: flex; 
		justify-content: space-evenly;
	}
	.applforForm .el-form-item__content {
		width: 400px;
	}
	.applforForm .el-date-editor.el-input, .el-date-editor.el-input__inner {
		width: 400px;
	}
	.applforForm .form .el-select {
		width: 400px;
	}
	.applforForm .el-form-item__label {
		font-size: 18px;
		font-weight: bolder;
		text-align: left;
		width: 151px;
		color: #333;
	}
	.applforForm .el-form-item.is-required:not(.is-no-asterisk) 
	.el-form-item__label-wrap>.el-form-item__label:before, 
	.el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before {
		content:'';	
		margin-right:0
	}
	
	.applforForm .btns{
		margin-top: 10%;
		margin-left: 5%;
	}
	.applforForm .btns button{
		width: 140px;
		height: 50px;
		font-size: 15px;
	}
	.applforForm .btns button:nth-of-type(1){
		color: #fff;
		background-color: #106ab1;
	}
	.applforForm .btns button:nth-of-type(2){
		color: #fff;
		background-color: #999;
	}
</style>